<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="mesh-model-tree__main">
    <div class="header">
      <h3 class="head-title"><span class="title">质量检测结果</span></h3>
      <div class="upload-statistic">
        本次共导入 <el-link type="primary">{{ checkResult?.totalDataCount }}</el-link> 条数据；
        <div class="data-count-all" v-if="checkResult?.failedDataCount > 0">
          其中达标数据量 <el-link type="primary">{{ checkResult?.qualifiedDataCount }}</el-link> 条；
          不达标数量 <el-link type="primary">{{ checkResult?.failedDataCount }}</el-link> 条；<br>
          具体内容见：「数据检测结果」
        </div>
      </div>
    </div>
    <h3 v-if="checkResult?.failedMessage?.length > 0" class="head-title"><span class="title">数据检测结果</span></h3>
    <div v-if="checkResult?.failedMessage?.length > 0" class="check-result">
      <template v-for="(item, index) in checkResult.failedMessage">
        <template v-if="item.message">
          <div class="check-result__item" :key="index">
            <!-- <div class="left">
              <vue-json-pretty 
                :data="JSON.parse(item.data)"
                :deep="0"
                :showLength="true"
              />
            </div> -->
            <div class="right" v-html="item.message">
            </div>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>
<script name="FileLoadResult" setup>
// import FilterFiles from './FilterFiles.vue';
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
import { updatePart } from '@/api/elementsLibrary';
const props = defineProps(['active', 'data']);  
const emit = defineEmits(['change', 'handleEvent']);
const zipData = ref(props?.data);
const fileVisible = ref(false);
const filterFiles = ref([]);
const formData = ref({ name: '', version: '' });
const modifyVisible = ref(false);
const defaultProps = { children: 'children', label: 'name' };
const queryParams = ref({ modelNumber: '',batchNumber: '', sectionNumber: '', childSectionNumber: '' });
const currentData = ref(null);
const nodeData = ref(null);
const currentNodeKey = ref(2);
const refTree = ref();
const treeList = ref({});
const tableData = ref([]);
const countVo = ref({});
const initTableData = ref([]);
//修改过的数据id集合
const modifyIds = ref([]);
const checkResult = ref({});
// 通知父组件data已修改
const change = () => {
  emit('change', { changeData: zipData.value ,modifyDataIds:modifyIds.value});
};
const tableHeight = computed(() => {
  return 'calc(100% - 10px)';
});
const handleData = (res) => {
  checkResult.value = res;
}
//点击事件handleTable
const handleEvent = (data) => {
  if (data?.type === 'cancelFileShow') {
    fileVisible.value = false;
  }
};
const handleTable = (type, row, index) => {
  if (type === 'edit') {
    modifyVisible.value = true;
    formData.value.version = data.versionNumber;
    formData.value.partNum = data.partNumber;
  }
  if (type === 'del') {
    ElMessageBox.confirm('数据移除后不会被导入，请确认是否移除？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      tableData.value.splice(index, 1);
      row.filtered = 1;
      // initTableData.value = initTableData.value.filter(item => item.filtered == 0);
      initTableData.value.forEach(item => {
        if (item.id == row.id) {
          item.filtered = 1;
        }
      })
      // row.removeFlag = true;
      countVo.value.filterCount = initTableData.value.filter(item => item.filtered == 1 && item.fileType == 'file').length;
      countVo.value.notFilterCount = initTableData.value.filter(item => item.filtered == 0 && item.fileType == 'file').length;
    });
  }
};
const initData = () => {
  treeList.value = props.data?.treeNodeVoList || [];
  tableData.value = props.data?.collectVoList.filter(item => item.filtered == 0 && item.fileType == 'file') || [];
  initTableData.value = JSON.parse(JSON.stringify(props.data?.collectVoList || []));
  countVo.value = {
    totalCount: props.data?.countVo?.totalCount || 0,
    filterCount: props.data?.countVo?.filterCount || 0,
    notFilterCount: props.data?.countVo?.notFilterCount || 0
  };
}
onMounted(() => {
  initData();
});
defineExpose({
  handleData
});
</script>
<style lang="scss" scoped>
.mesh-model-tree__main {
  width: 100%;
  // height: 100%;
  height: calc(100vh - 260px);
  overflow-y: auto;
  padding: 10px;
  .upload-statistic {
    // font-size: 14px;
  }
  .node-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 210px;
  }
  .head-title {
    .title {
      font-size: 18px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      &::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 16px;
        margin-right: 5px;
        background-color: #409EFF;
        vertical-align: middle;
        margin-top: -3px;
      }
    }
  }
  .upload-result {
    display: flex;
    width: 100%;
    height: calc(100% - 74px);
    font-size: 12px;
    .left {
      width: 300px;
      height: 100%;
      overflow: auto;
      // &.fourth-step {
      //   height: calc(100% - 74px);
      // }
      .title {
        margin-bottom: 5px;
      }
      .custom-tree-node {
        display: flex;
        .icon-class {
          color: #ffcc66;
          font-size: 120%;
        }
        .node-title {
          padding-left: 5px;
          font-size: 12px;
          .modify_class {
            font-size: 12px;
            color: #409eff;
          }
        }
      }
    }
    .split {
      height: 100%;
      width: 2px;
      background: #dcdfe6;
      margin-right: 8px;
      margin-top: 20px;
      height: 100%;
      overflow: hidden;
    }
    .right {
      padding: 4px;
      width: calc(100% - 300px);
      height: 100%;
      // overflow: auto;
      .title {
        margin-bottom: 5px;
      }
    }
  }
  .check-result {
    .check-result__item {
      display: flex;
      margin-bottom: 20px;
      .left {
        flex: 0 0 30%;
      }
      .right {
        flex: 1;
      }
    }
  }
}
</style>